<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>

  <body>
    <button class="btn1">发送请求1</button>
    <button class="btn2">发送请求2</button>
    <button class="btn3">发送请求3</button>
    <button class="btn4">发送请求4</button>
    <script>
      let btn1 = document.querySelector(".btn1");
      let btn2 = document.querySelector(".btn2");
      let btn3 = document.querySelector(".btn3");
      let btn4 = document.querySelector(".btn4");

      let req1 = axios.create({
        timeout: 2000,
        baseURL: "http://localhost:3000",
      });

      btn1.onclick = function () {
        req1({
          url: "/getdata",
        }).then((res) => {
          console.log(res);
        });
      };

      btn2.onclick = function () {
        req1({
          url: "/getpostdata",
          method: "post",
        }).then((res) => {
          console.log(res);
        });
      };


      let req2 = axios.create({
        timeout: 3000,
        baseURL: "http://localhost:5000",
      });
      btn3.onclick = async function () {
        await req2({
          url: "/getdata",
        }).then((res) => {
          console.log(res);
        });
      };

      btn4.onclick = function () {
        req2({
          url: "/getpostdata",
          method: "post",
        }).then((res) => {
          console.log(res);
        });
      };
    </script>
  </body>
</html>
